<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>每月（注册与非注册）用户数量变化</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="job3" style="width: 750px;height:600px;position: relative;left: 24%;top: 30px;"></div>

<%--<div id="tu2" style="width: 600px;height:400px;"></div>--%>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('job3'));

    // 指定图表的配置项和数据
    option = {
        title: {},
        tooltip: {
            // show: true,
            trigger:'axis',
            formatter: function(params){
                let str=params[0].name+'</br>';
                params.forEach(item=>{
                    str+=item.marker + item.seriesName + ' : ' + item.value + '</br>';
                })
                return str;
            }
        },
        axisPointer: {
            link: {
                xAxisIndex: 'all'
            }
        },
        xAxis: [{
            type: 'category',
            data: ['2011-1', '2011-2', '2011-3', '2011-4', '2011-5', '2011-6', '2011-7', '2011-8','2011-9','2011-10','2011-11','2011-12'
                  ,'2012-1', '2012-2', '2012-3', '2012-4', '2012-5', '2012-6', '2012-7', '2012-8','2012-9','2012-10','2012-11','2012-12'],
            axisLine: {
                onZero: true
            }
        },
            {
                gridIndex: 1,
                type: 'category',
                data: ['2011-1', '2011-2', '2011-3', '2011-4', '2011-5', '2011-6', '2011-7', '2011-8','2011-9','2011-10','2011-11','2011-12'
                    ,'2012-1', '2012-2', '2012-3', '2012-4', '2012-5', '2012-6', '2012-7', '2012-8','2012-9','2012-10','2012-11','2012-12'],
                axisLine: {
                    onZero: true
                }
            }
        ],
        yAxis: [{
            name: '注册用户数与非注册用户数',
            type: 'value',
            nameTextStyle: {
                padding: [0, 0, 6, 180] // 文字自交多的时候设置距离容器左侧的距离
            }
        },
            {
                name: '租车人数',
                type: 'value',
                gridIndex: 1,
                nameTextStyle: {
                    padding: [0, 0, 6, 110]
                }
            }
        ],
        grid: [{
            left: 50,
            right: 50,
            top: '8%',
            height: '33%'
        },
            {
                left: 50,
                right: 50,
                top: '55%',
                height: '35%'
            }
        ],
        dataZoom: [{
            show: true,
            realtime: true,
            start: 20,
            end: 100,
            top: '96%',
            bottom: '00%',
            xAxisIndex: [0, 1]
        },
            {
                type: 'inside',
                realtime: true,
                start: 20, // dataZoom百分比
                end: 100,
                top: '95%',
                bottom: '00%',
                xAxisIndex: [0, 1]
            }
        ],
        series: [{
            name: '注册用户数',
            data: [1176,1560,1656,2016,3360,3672,3504,3456,3216,3288,3192,2952,2688,3192,4080,4704,4992,5352,5088,5352,5568,5616,4752,4680],
            type: 'line',
            smooth: true,
            lineStyle: {
                normal: {
                    color: '#4194fc'
                }
            },
            itemStyle: {
                normal: {
                    color: '#4194fc',
                    borderColor: '#4194fc'
                }
            }
        },
            {
                name: '非注册用户书',
                data: [96,192,408,624,816,1008,1368,912,960,888,528,264,264,288,888,1440,1320,1512,1296,1488,1440,1080,792,504],
                type: 'line',
                smooth: true,
                lineStyle: {
                    normal: {
                        color: '#3bbc86'
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#3bbc86',
                        borderColor: '#3bbc86'
                    }
                }
            },
            {
                name: '租车人数',
                data: [1296,1752,2064,2664,4176,4704,4872,4368,4176,4176,3721,3216,2976,3480,4992,6168,6336,6888,6408,6840,7008,6720,5544,5208],
                type: 'bar',
                smooth: true,
                xAxisIndex: 1, // 指定x轴
                yAxisIndex: 1, // 指定y轴
                lineStyle: {
                    normal: {
                        color: '#ffb25f'
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#ffb25f',
                        borderColor: '#ffb25f'
                    }
                }
            }
        ]
    };


    myChart.setOption(option);

</script>
</body>
</html>